<div ng-if="modaldata.op=='choose'">
<style type='text/css'>
    .province { float:left; position:relative;width:150px; height:35px; line-height:35px;border:1px solid #fff;}
    .province:hover { border:1px solid #f7e4a5;border-bottom:1px solid #fffec6; background:#fffec6;}
    .province .provinceall { margin-top:10px;}
    .province ul { list-style: outside none none;position:absolute;padding:0;background:#fffec6;border:1px solid #f7e4a5;display:none;
        width:auto; width:300px; z-index:999999;left:-1px;top:32px;}
    .province ul li  { float:left;min-width:60px;margin-left:20px; height:30px;line-height:30px; }
    .modal-body {padding: 0px 30px 0px 30px}

    .modal-body {height:auto;}
    .row.row-title b {padding: 10px;}
    .row.row-areas .item {height:430px;overflow:auto; width: 33.33%; float: left;}
    .row.row-areas .child {padding-bottom: 10px; position: relative}
    .row.row-areas .child:before {content: ''; position: absolute; border-bottom: 1px dashed #eee; left: 10px; top:-1px; right: 10px}
    .row.row-areas .child.active {background: #eee}
    .row.row-areas .child.active:before {border: 0}
    .row.row-areas .child:first-child:before {top: 0}
    .p-group, .c-group, .a-group {cursor: default}
    input[type=checkbox] {cursor: pointer}
</style>

            <div class="modal-body" ng-init="modaldata.item=str_json(modal_set[modal_to])">
                <div class="row row-title">
                    <b class="col-sm-4">省份</b>
                    <b class="col-sm-4">城市</b>
                    <b class="col-sm-4">地区</b>
                </div>
                <div class="row row-areas form-horizontal">
                    <div class="item">
 
                        <div ng-repeat="(p,province) in modaldata.areas" class="child p-group">
                            <label class="checkbox-inline " style="cursor: default;padding-right:100px" ng-click="modaldata.citys=province;modaldata.countys=[];modaldata.current_province=p">{{p}} <i class="fa fa-chevron-right"></i></label>
                            <label class="checkbox-inline pull-right"  style="margin-top: 12px;">
                                <input type="checkbox" ng-checked="modaldata.item[p]" ng-click="modaldata.toogle_province(p);modaldata.citys=province;modaldata.countys=[];modaldata.current_province=p" class="provinceall" title="选择" />
                            </label>
                        </div>

                    </div>

                    <div class="item">
                                <div ng-repeat="(c,city) in modaldata.citys" class="child c-group clist" >
                                    <label class="checkbox-inline " style="cursor: default;padding-right:100px" ng-click="modaldata.countys=city;modaldata.current_city=c">{{c}} <i class="fa fa-chevron-right"></i></label>
                                    <label class="checkbox-inline pull-right"  style="margin-top: 12px;" ng-click="modaldata.toogle_city(c);modaldata.countys=city;modaldata.current_city=c">
                                        <input type="checkbox"  ng-checked="modaldata.check_city(c)" class="cityall" title="选择" />
                                    </label>
                                </div>

                    </div>

                    <div class="item">

                                    <div ng-repeat="d in modaldata.countys" class="child a-group alist ">
                                        <label class="checkbox-inline " style="cursor: default;padding-right:100px" >{{d}}</label>
                                        <label class="checkbox-inline pull-right" style="margin-top: 12px;">
                                            <input type="checkbox" ng-click="modaldata.toogle_county(d)" ng-checked="modaldata.check_county(d)" class="areaall"  title="选择" />
                                        </label>
                                    </div>

                    </div>

                    <!--div class="col-sm-3" style="height:300px;overflow:auto" id="street_list">
                    </div-->


                    </div>
            </div>
            <div class="modal-footer">
                <span class="pull-left">Tip: 点击省份、城市展开子级</span>
                <a href="javascript:;" id='btnSubmitArea' class="btn btn-primary" ng-click="modal_result(json_str(modaldata.item))">确定</a>
                <a href="javascript:;" class="btn btn-default" ng-click="modal_result(modal_set[modal_to])">关闭</a>
            </div>
</div>
<script>
scope.modaldata.toogle_province=function(p){
	if(!scope.modaldata.item[p]){
		scope.modaldata.item[p]=true;
	}else{
		scope.modaldata.item[p]=undefined;
	}
}
scope.modaldata.toogle_city=function(c){
	if(!scope.modaldata.item[scope.modaldata.current_province]){
		scope.modaldata.item[scope.modaldata.current_province]={};
	}
	if(scope.modaldata.item[scope.modaldata.current_province]===true || scope.modaldata.item[scope.modaldata.current_province][c]){
		if(scope.modaldata.item[scope.modaldata.current_province]===true){
			scope.modaldata.item[scope.modaldata.current_province]={};
			angular.forEach(scope.modaldata.citys,function(v,k){
				scope.modaldata.item[scope.modaldata.current_province][k]=true;
			});
		}
		
		scope.modaldata.item[scope.modaldata.current_province][c]=undefined;
	}else{
		
		scope.modaldata.item[scope.modaldata.current_province][c]=true;
	}
}
scope.modaldata.check_city=function(c){
	if(scope.modaldata.item[scope.modaldata.current_province]===true){
		return true;
	}
	if(scope.modaldata.item[scope.modaldata.current_province] && scope.modaldata.item[scope.modaldata.current_province][c]){
		return true;
	}
	return false;
}
scope.modaldata.check_county=function(d){
	if(scope.modaldata.item[scope.modaldata.current_province]===true){
		return true;
	}
	if(scope.modaldata.item[scope.modaldata.current_province] && scope.modaldata.item[scope.modaldata.current_province][scope.modaldata.current_city]===true){
		return true;
	}
	if(scope.modaldata.item[scope.modaldata.current_province] && scope.modaldata.item[scope.modaldata.current_province][scope.modaldata.current_city] && scope.modaldata.item[scope.modaldata.current_province][scope.modaldata.current_city][d]===true){
		return true;
	}
	return false;
}
scope.modaldata.toogle_county=function(d){
	if(!scope.modaldata.item[scope.modaldata.current_province]){
		scope.modaldata.item[scope.modaldata.current_province]={};
	}
	if(!scope.modaldata.item[scope.modaldata.current_province][scope.modaldata.current_city]){
		scope.modaldata.item[scope.modaldata.current_province][scope.modaldata.current_city]={};
	}
	if(scope.modaldata.item[scope.modaldata.current_province][scope.modaldata.current_city]===true || scope.modaldata.item[scope.modaldata.current_province][scope.modaldata.current_city][d]){
		if(scope.modaldata.item[scope.modaldata.current_province][scope.modaldata.current_city]===true){
			scope.modaldata.item[scope.modaldata.current_province][scope.modaldata.current_city]={};
			angular.forEach(scope.modaldata.countys,function(v){
				scope.modaldata.item[scope.modaldata.current_province][scope.modaldata.current_city][v]=true;
			});
			
		}
		scope.modaldata.item[scope.modaldata.current_province][scope.modaldata.current_city][d]=undefined;
		
	}else{
		
		scope.modaldata.item[scope.modaldata.current_province][scope.modaldata.current_city][d]=true;
	}
}
</script>